<template>
    <div class="addProduct4">
        <step-add :active='3'></step-add>
            <div>
                <van-cell-group style="text-align:left">
                    <van-cell is-link title="交付方式" :value="test" @click="showDeliverClick"/>
                    <van-popup v-model="showDeliver" get-container="body" position='bottom'>
                        <van-picker 
                            title='请选择交付方式' 
                            :columns="columns"
                            show-toolbar
                            @cancel="onCancel4Deliver"
                            @confirm="onConfirm4Deliver"
                        />
                    </van-popup>

                    <van-cell is-link title="报告格式" :value="test" @click="showPresentationClick"/>
                    <van-popup v-model="showPresentation" get-container="body" position='bottom'>
                        <van-picker 
                            title='请选择检验类别' 
                            :columns="columns"
                            show-toolbar
                            @cancel="onCancel4Presentation"
                            @confirm="onConfirm4Presentation"
                        />
                    </van-popup>

                    <van-field v-model="test" label="报告份数" />

                    <van-cell is-link title="交付日期" :value="test" @click="showTimeClick"/>
                    <van-popup v-model="showTime" get-container="body" position='bottom'>
                        <van-datetime-picker
                            v-model="currentDate"
                            type="date"
                            :formatter="formatter"
                            @confirm='timeConfirm'
                            @cancel='timecancel'
                        />
                    </van-popup>

                    <van-cell is-link title="余样处理" :value="test" @click="showSurplusClick"/>
                    <van-popup v-model="showSurplus" get-container="body" position='bottom'>
                        <van-picker 
                            title='请选择检验类别' 
                            :columns="columns"
                            show-toolbar
                            @cancel="onCancel4Surplus"
                            @confirm="onConfirm4Surplus"
                        />
                    </van-popup>

                    <van-field v-model="test" label="任务来源" />

                    <van-cell is-link title="是否加急" :value="test" @click="showUrgentClick"/>
                    <van-popup v-model="showUrgent" get-container="body" position='bottom'>
                        <van-picker 
                            title='请选择检验类别' 
                            :columns="columns"
                            show-toolbar
                            @cancel="onCancel4U"
                            @confirm="onConfirm4U"
                        />
                    </van-popup>

                    <van-field v-model="test" label="封存状态" />
                    <van-field v-model="test" label-width='120px' label="下派任务单编号" />
                </van-cell-group>
            </div>
        <div class='step4Footer' >
            <div class='pre' @click="pre">上一步</div>
            <div class='next' @click="save">保存</div>
        </div>
    </div>
</template>

<script>
import stepAdd from '@/components/stepAdd'
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,Field
    ,DatetimePicker
    ,Popup
    ,Cell
    ,CellGroup
    ,Picker } from 'vant';
export default {
    name: 'addProduct4',
    components: {
        stepAdd,
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
    },
    data () {
        return {
            test:'',
            columns: [
                { text: '类别一',id:1},
                { text: '商品二' },
                { text: '商品三' }
            ],
            showDeliver:false,
            showPresentation:false,
            currentDate: new Date(),
            showTime:false,
            showSurplus:false,
            showUrgent:false
        }
    },
    methods:{
        save(){
        },
        submit(){
        },
        showDeliverClick(){
            this.showDeliver = true
        },
        onCancel4Deliver()
        {
           this.showDeliver = false 
        },
        onConfirm4Deliver(){
           this.showDeliver = false  
        },

        showPresentationClick(){
            this.showPresentation = true
        },
        onCancel4Presentation(){
            this.showPresentation = false
        },
        onConfirm4Presentation(){
            this.showPresentation = false
        },

        showTimeClick(){
            this.showTime = true
        },
        formatter(type, val) {
            console.log(type)
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`
            } else if (type === 'day') {
                return `${val}日`
            }
            return val;
        },
        timeConfirm(val){
            this.form.fcontractdate = this.dateToString(val)
            this.showTime = false
        },
        timecancel(){
            this.showTime = false
        },

        showSurplusClick(){
            this.showSurplus = true
        },
        onCancel4Surplus(){
            this.showSurplus = false
        },
        onConfirm4Surplus(){
            this.showSurplus = false
        },

        showUrgentClick(){
            this.showUrgent = true
        },
        onCancel4U(){
            this.showUrgent = false
        },
        onConfirm4U(){
            this.showUrgent = false
        },
        pre(){
            this.$router.push({path:"/addProduct3"});
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.step4Footer{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    color: white;
    display: flex
}
.pre{
    background: #07c160;
    width: 50%;
}
.next{
    background:  #1989fa;
    width: 50%;
}
</style>
